<template>
  <div class="data_left100">
    <div class="dataAllBorder01">
      <div class="data_tit3">
        <el-tooltip placement="top-start">
          <template #content>
            统计规则：对行政和事业单位在编人员性别比例、平均年龄等进行比对分析
          </template>
          <span>人员结构情况展示</span></el-tooltip
        >
      </div>
      <!--TAB切换-->
      <div class="btngroup">
        <button
          id="save"
          @click.prevent="changePie(0)"
          :class="classNum == 0 ? 'add tabpress' : null"
        >
          行政
        </button>
        <button
          @click.prevent="changePie(1)"
          :class="classNum == 1 ? 'add tabpress' : null"
          id="snap"
        >
          事业
        </button>
      </div>
      <div
        id="ryjgqkzs"
        style="width: 98%; height: calc(100% - 80px); float: left"
      ></div>
    </div>
  </div>
</template>
<script>
var myChart;
import Sever from "@/api/selfApi.js";
export default {
  props: ["selectCode"],
  name: "Ryjgqkzs",
  data() {
    return {
		fontSize : 10,
		 colorListLabel : [
		  "rgb(234, 249, 237)",
		  "rgb(254, 242, 243)",
		  "rgb(241, 245, 255)",
		  "rgba(226, 225, 255, 1)",
		],
		colorList : [
		  "rgba(0, 138, 255, 1)",
		  "rgba(255, 155, 48, 1)",
		  "rgba(0, 180, 76, 1)",
		  "rgba(151, 101, 254, 1)",
		],
		colorLabelTitle :[
		  "rgb(215, 243, 220)",
		  "rgb(253, 230,232)",
		  "rgb(228, 236,255)",
		  "rgba(252, 248, 227, 1)",
		],
		
		
		echartData: [
		  {
		    value: 1000,
		    name: "男",
		  },
		  {
		    value: 3854,
		    name: "女",
		  },
		
		],
    
	  selectData:{},
      classNum: 0,
      option: {
  title: {
    text: "平均年龄为：11",
    left: "center",
    top: "45%",
    textStyle: {
      color: "#fff",
      fontSize: 12,
      align: "center",
    },
  },
  tooltip: {
    trigger: "item",
    formatter: "{b}<br/>{c} ({d}%)",
    textStyle: {
      fontSize: this.fontSize * 1.6,
    },
  },
   grid: {
      left: '100%',
      top: '100%',
      right: '100%',
      bottom: '100%',
      containLabel: true,
    },
  series: [
    {
      name: "pie",
      type: "pie",
      radius: ["50%", "70%"],
      hoverAnimation: false,
      color: ["#21CC88", "#FF85B8", "#0F63FF", "#034079", "#6f81da", "#00ffb4"],
      itemStyle: {
          //饼图之间颜色
        normal: {
          borderColor: "#fff",
          borderWidth: 2,
        },
      },
   labelLine: {
          length: 20,//视觉引导线第一段的长度
          length2: 20,//视觉引导线第二段的长度
		  position: 'end', 
		 
        },
      data: {},
    },
  ],
},
    };
  },
  components: {
    Sever,
  },
  watch: {
    selectCode(newV) {
      console.log(newV, "sssssss");
      this.refreshData();
    
    },
  },
  methods: {
	  saveImageToBackend() {
	        // 将 echarts 图表转换为图片
	        const base64Data = myChart.getDataURL({
	          pixelRatio: 2,
	        });
	        
	        // 构建请求体数据
	        const requestData = {
	          image: base64Data,
	          depCode:this.selectCode,
	  			  name:this.selectCode+"2"+".png"
	        };
	  			
	  		
	        
	        Sever.smz
	            .getSaveImage(requestData)
	            .then((res) => {
	             
	            })
	            .catch((err) => {
	              console.log(err);
	            });
	        
	      },
    async refreshData() {
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = this.$echarts.init(document.getElementById("ryjgqkzs"));
      myChart.clear();
      myChart.showLoading("default", {
        text: "正在加载，请稍候...",
        color: "#c23531",
        textColor: "rgba(255, 255, 255, 0.5)",
        maskColor: "#00000000",
        zlevel: 0,
      });
	 
      await Sever.smz
        .getRyjgqkzs({ depCode: this.selectCode })
        .then((res) => {
          if (res.code == 1) {
            console.log(res.data);
            let data = res.data;
            this.selectData =data[0];
          
         this.initEcharts();
          } else {
            console.log("接口请求错误！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  
    changePie(num) {
      this.classNum = num;
      this.initEcharts();
    },
    initEcharts() {
      myChart.hideLoading();
	
      if (this.classNum == 0) {
       this.option.title.text="平均年龄："+this.selectData.xzage;
       this.echartData[0].value=this.selectData.xznan;
       this.echartData[1].value=this.selectData.xznv;
      } else if(this.classNum == 1){
        this.option.title.text="平均年龄："+this.selectData.syage;
        this.echartData[0].value=this.selectData.synan;
        this.echartData[1].value=this.selectData.synv;
      }
       this.option.series[0].data =  this.echartData.map((item, index) => {
		  return {
		    ...item,
		    value: item.value,
		    actValue: item.value,
		    label: {
		      show: true,
		      color: this.colorList[index],
		      textStyle: {
		        fontSize: 12,
		      },
		      formatter:
		        "{white|{b}占比：{d}%}",
		      rich: {
		        test: {},
		        white: {
		          color: "#000",
		          align: "left",
		          fontSize: this.fontSize * 1.4,
		          backgroundColor: this.colorLabelTitle[index],
		          width: 150,
		          borderRadius: [4, 4, 4, 4],
		          padding: [8, 4],
		        },
		        yellow: {
		          color: "#666666",
		          align: "left",
		          fontSize: this.fontSize * 1.4,
		          padding: [6, 4],
		          backgroundColor: this.colorListLabel[index],
		          width: 120,
		          borderRadius: [0, 0, 0, 0],
		        },
		        three: {
		          color: "#666666",
		          align: "left",
		          fontSize: this.fontSize * 1.4,
		          padding: [6, 4],
		          backgroundColor: this.colorListLabel[index],
		          width: 120,
		          borderRadius: [0, 0, 4, 4],
		        },
		      },
		    },
		  };
		});
		
      this.option && myChart.setOption(this.option);
      // 重置option属性
      this.option = this.$options.data.call(this).option;
      // 响应式变化
      window.addEventListener("resize", () => myChart.resize(), false);
    },
  },
  mounted() {
     this.refreshData();
 
  },
};
</script>